<!--
*@Author: QWP
*@Description: 审核通过界面
*@Date: 2024-08-12 20:16:18
-->
<template>
  <div class="u-custom-height">
    <u-loading-box :loading="loading" class="f-w-100 f-h-100">
      <Form :model="form" ref="formRef">
        <FormItem label="审核意见" name="msg" :rules="{ required: true, message: '审核意见不能为空!' }">
          <Textarea v-model:value="form.msg"></Textarea>
        </FormItem>
        <FormItem label="审核节点" name="selAuditNode" :rules="{ required: true, message: '审核节点不能为空!' }"
          v-if="selData.length != 0">
          <Select v-model:value="form.selAuditNode" 
            :fieldNames= "{ label: 'nodeName', value: 'nodeName' }"
            :options="selData"
            @change="selNodeChange">
          </Select>
        </FormItem>
        <FormItem label="审核人员" name="variables" :rules="{ required: true, message: '审核人员不能为空!' }"
          v-if="form['nodeKey']">
          <SelRoleUser v-model:value="form.variables" 
            :fieldNames= "{ label: 'name', value: 'keyid' }"
            :multiple="true"
            :disabled="true"
            :isLoadData="true"
            class='f-normal-disable'
            :checkStrictly="true"
            :parent="{ key: 'roleName', valueKey: 'fkparentid', parentTLable: '角色名称' }"></SelRoleUser>
        </FormItem>
      </Form>
    </u-loading-box>
  </div>
  <Row justify="end">
    <Space>
      <Button type="primary" @click="submit">
        <template #icon>
          <UIconFont type="icon-shenhe"></UIconFont>
        </template>
        保存
      </Button>
      <Button :danger="true" :ghost="true" @click="close">
        关闭
      </Button>
    </Space>
  </Row>
</template>
<script lang="ts" setup>
defineOptions({
  name: 'u-audit'
})
import { ref, reactive, computed, onMounted, h, useAttrs, watch, nextTick } from 'vue'
import { alertC, confirmC, isValue, nullC, numberC } from '@/util/common'
import * as auditApi from '@/service/audit'
import UForm from '@/components/common/form/Form.vue'
import 'ant-design-vue/dist/reset.css';
import { Form, FormItem, Select, Textarea, Button, Space, Row } from 'ant-design-vue'
import UIconFont from '@/components/common/iconfont/IconFont.vue'
import SelRoleUser from '@/components/common/selRoleUser/SelRoleUserTree.vue'
import { cloneDeep } from 'lodash'

const props = defineProps<{
  params?: object,
  selData?: any[],
}>()

const attrs = useAttrs()
const emits = defineEmits(['submit', 'close'])

const loading = ref<boolean>(false)
const formRef = ref()
const form = ref({
  msg: '',
})

onMounted(() => { })

// 退回提交
const submit = async (type: number) => {
  await formRef.value.validate()
  let tForm = cloneDeep(form.value)
  delete tForm.selAuditNode
  tForm['variables'] = tForm['variables'] || []
  emits('submit', form.value)
}

const selNodeChange = (val, item) => {
  let tItem = cloneDeep(item)
  delete tItem.nodeName
  let key = Object.keys(tItem).filter(i => i.includes('_byMulit'))
  form.value = { ...form.value, ...tItem, nodeKey: key.length ? key[0] : '' }
  if(!tItem['nodeKey']) {
    form.value.variables = []
  }
}

// 关闭
const close = () => {
  // 延迟一段时间进行关闭
  setTimeout(() => {
    emits('close')
  }, parseInt(0.5 * 100))
}

</script>
<style lang='scss'>
@import url('ant-design-vue/dist/reset.css');

.u-custom-height {
  width: 100%;
  height: 100%;
  min-height: 250px;
  height: auto;
  padding-top: 16px
}
</style>